<!--
 @description 各办事处销售开单(车) 地图
 @fileName ChartMap.vue
 @author zengqiongying
 @created 2021/05/22 11:28:36
-->
<template>
  <div class="office-map">
    <div :id="chartId" ref="myEchart" class="chart-container" />
    <div class="map-pieces">
      <div v-for="(item,index) in dataRange" :key="index" class="pieces-item">
        <span class="dot" :style="{'backgroundColor':item.color}" />
        {{ item.value }}
      </div>
    </div>
    <van-popup
      v-model="showMapDetail"
      round
      closeable
      :close-on-click-overlay="false"
      class="custom-van-pop"
    >
      <map-detail v-if="showMapDetail" :detail-data="selectedData" />
    </van-popup>
  </div>
</template>

<script>
import ChartMapMixin from '@/mixins/ChartMap'
import MapDetail from './MapDetail'
import { getSaleOrderOfficeMap } from '@/apis/sale'
export default {
  name: 'ChartMap',
  components: { MapDetail },
  mixins: [ChartMapMixin],
  props: {
    onlyShowSale: {
      type: Boolean,
      default: false
    } // 是否只显示销售开单
  },
  data() {
    return {
      dataRange: [
        { value: '0', color: '#DDDDDD' },
        { value: '1-100', color: '#E4F1FF' },
        { value: '100-300', color: '#B7DCFF' },
        { value: '300-800', color: '#7ABDFF' },
        { value: '≥800', color: '#48A5FF' }
      ]
    }
  },
  watch: {
    showMapDetail(val, oldVal) {
      if (!val) {
        this.clearMapSelect()
      }
    }
  },
  methods: {
    async getgeoData() {
      let goeData = []
      await getSaleOrderOfficeMap().then(res => {
        if (res.data && res.data.length) {
          goeData = res.data.map(v => {
            const item = {
              name: v.provinceName,
              value: v.quantity,
              officeName: v.officeName,
              officeCode: v.officeCode,
              saleCount: v.quantity // 销售开单
            }
            if (this.onlyShowSale) {
              return item
            }
            return {
              ...item,
              ...{
                shipQuantity: v.shipQuantity, // 启运数量
                careQuantity: v.careQuantity // 配车数量
              }}
          })
        }
      })
      return goeData
      /*  return [			// 模拟数据
        { name: '内蒙古自治区', value: 20, id: 1, saleCount: 236, orderCount: 149, logisticsCount: 479, productionCount: 1623 },
        { name: '黑龙江省', value: 100, id: 2, saleCount: 236, orderCount: 149, logisticsCount: 479, productionCount: 1623 },
        { name: '吉林省', value: 200, id: 3, saleCount: 236, orderCount: 149, logisticsCount: 479, productionCount: 1623 },
        { name: '辽宁省', value: 400, id: 4, saleCount: 236, orderCount: 149, logisticsCount: 479, productionCount: 1623 },
        { name: '云南省', value: 600, id: 5, saleCount: 236, orderCount: 149, logisticsCount: 479, productionCount: 1623 },
        { name: '四川省', value: 900, id: 6, saleCount: 236, orderCount: 149, logisticsCount: 479, productionCount: 1623 }
      ] */
    },
    // 查看详情数据
    handleOpenMapDetail(data) {
    // 做延迟处理防止弹窗自动进入详情界面
      setTimeout(() => {
        this.showMapDetail = true
        this.selectedData = JSON.parse(JSON.stringify(data))
        if (this.onlyShowSale) {
          this.selectedData = {
            name: data.name,
            saleCount: data.saleCount,
            officeName: data.officeName
          }
        }
      }, 300)
    }
  }
}

</script>
<style lang='less' scoped>
  .office-map{
    padding-bottom:5px;
  }
  .chart-container{
    width: 100%;
    height: 260PX;
  }
  .map-pieces{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    .pieces-item{
      margin-top: 10px;
      height: 14px;
      display: flex;
      align-items: center;
      color: #999;
      font-size: 12px;
      white-space: nowrap;
      &:first-child{
        width: 30px;
      }
      .dot{
        box-sizing: border-box;
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius: 2px;
        margin-right: 5px;
      }
    }
  }
</style>
